import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import "../Hcy_scss/Hcy_page8.scss"
import { Toast, NavBar } from 'react-vant';
import { useDispatch } from 'react-redux'
import { changeDefaultState , changeYesandno } from "../../../redux/slice/DefaultSlice"
import { post } from '../../../axios/request.js'
export default function Hcy_page8() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const pay = async () => {
        let { result } = await post('/pcpay', { price: 4 })
        dispatch(changeDefaultState(0));
        dispatch(changeYesandno(false))
        window.location.href = result

    }
    return (
        <div id='Hcy_page8' className='animate__animated animate__bounceInUp'>
            <div className='top'>
                <p>支付违约金</p>
                <span onClick={() => { navigate("/app"), dispatch(changeDefaultState(0)) }}>X</span>
            </div>
            <div className='tbox1'>
                <p>合计费用</p>
                <p>4.00元</p>
            </div>
            <div className='tbox2'>
                <p>优惠券</p>
                <p>无法使用优惠卷</p>
            </div>
            <div className='price'>
                <p><span>4.00 </span>元</p>
                <p>费用明细 &gt; </p>
            </div>
            <div className='main'>
                <p><span><svg t="1728712656141" className="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2529" width="38" height="38"><path d="M233.315646 578.039803a72.714029 72.714029 0 0 0-28.848944 42.151286 89.280749 89.280749 0 0 0 22.156969 79.854856 154.037855 154.037855 0 0 0 91.647423 38.438056 248.908852 248.908852 0 0 0 147.101051-50.271427 314.19642 314.19642 0 0 0 70.22494-69.368041 439.630159 439.630159 0 0 0-211.409305-61.207095 205.941472 205.941472 0 0 0-90.912938 20.687998zM982.735315 713.307482a511.936141 511.936141 0 1 0-56.188113 99.073884c-87.974998-42.885771-232.097303-115.314167-321.541272-158.199937a386.053549 386.053549 0 0 1-175.949995 117.517622 248.664024 248.664024 0 0 1-126.494662 9.629916A170.033309 170.033309 0 0 1 212.627648 734.07709a198.800644 198.800644 0 0 1-27.339169-37.703571 4.447716 4.447716 0 0 1 0.734485 2.937941 77.03933 77.03933 0 0 1-7.385656-19.219028 151.385548 151.385548 0 0 1-3.71323-17.750057 35.826553 35.826553 0 0 1 0-12.567857 86.750856 86.750856 0 0 1 1.46897-23.666743 117.272794 117.272794 0 0 1 35.500115-65.04274 205.084572 205.084572 0 0 1 148.570022-50.271427 784.878979 784.878979 0 0 1 211.409305 48.965676 683.479225 683.479225 0 0 0 42.151286-121.230852H307.253817v-33.459879H464.515246v-66.51171H274.732447v-34.031144H464.515246v-66.51171c0-8.854626 2.203455-16.321892 16.321892-16.321892h74.672655v82.833602h206.227105v33.255855h-206.104691v66.511709h164.851109a668.218256 668.218256 0 0 1-68.021485 183.335651c114.579681 40.682316 276.452045 104.256085 330.273484 125.678568z m0 0" fill="#1296db" p-id="2530"></path></svg></span>支付宝支付</p>
                <input type="radio" defaultChecked />
            </div>
            <div className='btm'>
                <button onClick={() => { pay() }}>确认支付4.00元</button>
            </div>
        </div>
    )
}
